<template>
  <div v-if="maximize" class="right-nav">
    <a class="to-top" @click.stop="toTop">
      <i class="huobo huobo-to-top"></i>
    </a>
    <router-link to="/" class="to-service">
      <i class="huobo huobo-qq"></i>
    </router-link>
    <router-link to="/" class="to-home">
      <i class="huobo huobo-home"></i>
    </router-link>
    <router-link to="/" class="to-play">
      <i class="huobo huobo-dice"></i>
    </router-link>
    <van-icon name="arrow-down" @click="toggle(false)"></van-icon>
  </div>
  <div v-else class="right-nav minimize">
    <van-icon name="arrow-up" @click="toggle(true)"></van-icon>
  </div>
</template>

<script>
export default {
  name: 'RightNav',
  data() {
    return {
      maximize: false
    };
  },
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
    toggle(status) {
      this.maximize = status;
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../less/global';
  .right-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    width: 4rem;
    height: 20rem;
    z-index: 100;
    .van-icon,
    .huobo {
      display: block;
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      background-color: @mainBgColor;
      font-size: 2rem;
      color: #fff;
      border-bottom: 1px solid #ddd;
    }
    .to-top i {
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }
    .van-icon-arrow-down {
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border: 0;
    }

    &.minimize {
      height: 4rem;
      .van-icon-arrow-up {
        border-radius: 50%;
        border: 0;
      }
    }
  }
</style>
